<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{background-color:#F0F0F0;}
			.tiji{
				position: absolute;
				left:10px ;
				top: 100px;
			
			}
			.name1{width: 200px;
			        height: 100px;
			        background-color: white;
			        border-radius: 200px 200px 0px 0px;
			        position: relative;
			        box-shadow: 0px 0px 10px #EDDE74;}
		    .name2{width: 200px;
			        height: 100px;
			        background-color: black;
			        border-radius: 0px 0px 200px 200px;
			        position: relative;
			         box-shadow: 0px 0px 10px #EDDE74;}
		     .n1{width: 100px;
		            height: 100px;
		            border-radius: 50%;
		            background-color:black;
		            position: absolute;
		            top: 50px;
		            z-index:10;}
		    .n2{width: 100px;
		            height: 100px;
		            border-radius: 50%;
		            background-color:white;
		            position: absolute;
		            top: -50px;
		            right: 0px;}
		       .a1{width: 25px;
		            height: 25px;
		            border-radius: 50%;
		            background-color:white;
		            position: absolute;
		            top: 25px;
		            right:38px;
		           }
		        .a2{width: 25px;
		            height: 25px;
		            border-radius: 50%;
		            background-color:black;
		            position: absolute;
		            top: 50px;
		            right:38px;}
		</style>
	</head>

	<body>
		<div class="tiji">
			<div class="name1">
				<div class="n1">
					<div class="a1"></div>
				</div>
			</div>
			<div class="name2">
				<div class="n2">
					<div class="a2"></div>
				</div>
			</div>
		</div>
		<button onclick="Divleft(10)">向右移动</button>
		<button onclick="Divleft(-10)">向左移动</button>
		<button onclick="Divtop(-10)">向上移动</button>
		<button onclick="Divtop(10)">向下移动</button>
		<button onclick="Divlefttop(10,10)">右下移动</button>
		<button onclick="Divlefttop(10,-10)">右上移动</button>
		<button onclick="Divlefttop(-10,10)">左下移动</button>
		<button onclick="Divlefttop(-10,-10)">左上移动</button>
		<script type="text/javascript">
			var w=10;  var m=100; 
			function Divleft(x)
			{//拿到太极对象
				var tj=document.querySelector(".tiji");
				//点击对象向右移动 
				w=w+x;
				tj.style.left=w+"px";
			}
			function Divtop(x)
			{
				var tj=document.querySelector(".tiji");
			   m=m+x;
			   tj.style.top=m+"px";
			}
			function Divlefttop(x,y)
			{
				var tj=document.querySelector(".tiji");
			   w=w+x;
			   m=m+y;
			   tj.style.left=w+"px";
			   tj.style.top=m+"px";
			}
		</script>
		
		
	
		
	</body>

</html>